<template>
  <dv-full-screen-container>
    <div class="dataScreen-container">
      <div ref="dataScreenRef" class="dataScreen">
        <div class="dataScreen-header">
          <div class="header-lf">
            <span class="header-screening" @click="router.push('./index')"
              >首页</span
            >
          </div>
          <div class="header-ct">
            <div class="header-ct-title">
              <span>经典印务综合分析平台</span>

              <!-- <div class="header-ct-warning">平台高峰预警信息（2条）</div> -->
            </div>
          </div>

          <div class="header-rg">
            <!-- <span class="header-download">统计报告</span> -->
            <span class="header-time">
              当前时间：{{ time }}
              <span style="color: #05e8fe; margin-left: 10px; cursor: pointer"
                ><screenfull id="screenfull"
              /></span>
            </span>
          </div>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="main-left">
          <div class="title">
            <img
              style="width: 26px; height: 26px"
              src="../../assets/images/right.png"
              alt=""
            />

            <span v-if="workshopId == '7' || workshopId == '10'">
              本月印刷数据
            </span>
            <span v-else> 本月装订数据</span>
          </div>
          <div>
            <div
              style="padding-top: 5px"
              v-if="workshopId == '7' || workshopId == '10'"
            >
              <dv-border-box-8
                v-if="printConfig.data && printConfig.data.length > 0"
              >
                <!-- 印刷机 -->
                <div>
                  <div class="print-box">
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ printConfig.data[0].value }}
                        </div>
                        <div style="color: #fff">
                          {{ printConfig.data[0].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ printConfig.data[1].value }}
                        </div>
                        <div style="color: #fff">
                          {{ printConfig.data[1].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ printConfig.data[2].value }}
                        </div>
                        <div style="color: #fff">
                          {{ printConfig.data[2].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                  </div>
                  <div
                    style="
                      width: 100%;
                      height: 320px;
                      padding: 20px;
                      overflow: hidden;
                    "
                  >
                    <dv-scroll-ranking-board :key="key" :config="printConfig" />
                  </div>
                </div>
              </dv-border-box-8>
            </div>
            <div v-else style="padding-top: 5px">
              <dv-border-box-8>
                <!-- 折页机 -->
                <div v-if="bindConfig.data && bindConfig.data.length > 0">
                  <div class="print-box">
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ bindConfig.data[0].value }}
                        </div>
                        <div style="color: #fff">
                          {{ bindConfig.data[0].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ bindConfig.data[1].value }}
                        </div>
                        <div style="color: #fff">
                          {{ bindConfig.data[1].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                    <dv-border-box-12 class="print-item">
                      <div class="print-info">
                        <div class="print-title">
                          {{ bindConfig.data[2].value }}
                        </div>
                        <div style="color: #fff">
                          {{ bindConfig.data[2].name }}
                        </div>
                      </div>
                    </dv-border-box-12>
                  </div>
                  <div
                    style="
                      width: 100%;
                      height: 320px;
                      padding: 20px;
                      overflow: hidden;
                    "
                  >
                    <dv-scroll-ranking-board
                      :key="keyBind"
                      :config="bindConfig"
                    />
                  </div>
                </div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
        <div class="main-center">
          <div class="tab-box">
            <div
              class="tab-item"
              @click="hanldeClike(item, index)"
              v-for="(item, index) in workBranchList"
              :class="{ 'current-item': currentIndex == index }"
              :key="item.value"
            >
              <span>
                {{ item.title }}
              </span>
            </div>
          </div>
          <div style="height: 400px">
            <dv-border-box-1 style="padding: 10px">
              <div style="margin: 40px 0">
                <div v-if="workshopId == 7 || workshopId == 10">
                  <h3 style="text-align: center; color: #b7fafc">
                    今日消耗纸令数
                  </h3>
                  <div class="ling">
                    <dv-decoration-7 style="padding: 0 10px">
                      <dv-digital-flop
                        :key="key"
                        :config="configLing"
                        style="width: 200px; height: 50px"
                      />
                    </dv-decoration-7>
                  </div>
                </div>
                <div v-else>
                  <h3 style="text-align: center; color: #b7fafc">
                    今日装订总册数
                  </h3>
                  <div class="ling">
                    <dv-decoration-7 style="padding: 0 10px">
                      <dv-digital-flop
                        :key="keyBind"
                        :config="configLingBind"
                        style="width: 200px; height: 50px"
                      />
                    </dv-decoration-7>
                  </div>
                </div>
              </div>
              <div class="workshop-main">
                <dv-border-box-10 class="workshop-item">
                  <div class="workshop-info">
                    <div class="workshop-title1">
                      {{ sumProduce.produceNumDay }}
                    </div>
                    <div style="color: #fff">今日生产单数</div>
                  </div>
                </dv-border-box-10>
                <dv-border-box-10 class="workshop-item">
                  <div class="workshop-info">
                    <div class="workshop-title2">
                      {{ sumProduce.produceNumErrDay }}
                      <!-- <span style="font-size: 28px; font-weight: 700">%</span> -->
                    </div>
                    <div style="color: #fff">今日异常生产单</div>
                  </div></dv-border-box-10
                >
                <dv-border-box-10 class="workshop-item">
                  <div class="workshop-info">
                    <div class="workshop-title2">
                      {{ sumProduce.produceNumErrMonth }}
                    </div>
                    <div style="color: #fff">本月异常生产单</div>
                  </div></dv-border-box-10
                >
                <dv-border-box-10 class="workshop-item">
                  <div class="workshop-info">
                    <div class="workshop-title1">
                      {{ sumProduce.produceNumMonth }}
                    </div>
                    <div style="color: #fff">本月生产单数</div>
                  </div></dv-border-box-10
                >
              </div>
            </dv-border-box-1>
          </div>
        </div>
        <div class="main-right">
          <div class="title">
            <img
              style="width: 26px; height: 26px"
              src="../../assets/images/right.png"
              alt=""
            />
            已排产生产单
          </div>
          <div style="height: 400px; padding-top: 5px">
            <dv-border-box-8>
              <swiper
                ref="mySwiper"
                :modules="modules"
                v-bind="swiperOption"
                style="height: 400px"
                v-if="produceOrderList.length"
              >
                <swiper-slide
                  v-for="(item, index) in produceOrderList"
                  :key="index"
                >
                  <div class="right-order-list">
                    <div class="right-order-item">
                      <div
                        class=""
                        :class="[
                          {
                            index_common: index < 3,
                            'index_common-more': index >= 3,
                          },
                          {
                            index_one: index == 0,
                            index_two: index === 1,
                            index_three: index === 2,
                            index_more: index >= 3,
                          },
                        ]"
                      >
                        {{ index + 1 }}
                      </div>
                      <div class="right-order-middle">
                        {{ item.shipmentType }}
                      </div>
                      <div style="font-size: 14px">
                        {{ item.produceNo }}
                      </div>
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
            </dv-border-box-8>
          </div>
        </div>
      </div>
      <div class="dataScreen-order">
        <div class="title" style="width: 28%; height: 30px">
          <img
            style="width: 26px; height: 26px"
            src="../../assets/images/right.png"
            alt=""
          />
          生产明细
        </div>
        <div>
          <dv-scroll-board
            :config="config"
            v-if="config.data && config.data.length > 0"
            :key="orderKey"
            style="width: 100%; height: 500px"
          />
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script setup>
import Screenfull from "@/components/Screenfull";
import { useRouter } from "vue-router";
import { Swiper, SwiperSlide } from "swiper/vue";
import { getList as getDataList } from "@/api/basicInfo/workbench";
import { getReportDetail } from "@/api/production/printReport.js";
import { getProduceOrderList } from "@/api/production/cover";
import "swiper/css";
// import "swiper/css/pagination"; // 轮播图底面的小圆点
// import "swiper/css/navigation"; // 轮播图两边的左右箭头
// import "swiper/css/scrollbar"; // 轮播图的滚动条
// 引入swiper核心和所需模块
import {
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
} from "swiper/modules";
import { onMounted, reactive, ref } from "@vue/runtime-core";
import {
  getMachineLing,
  getSumLing,
  getSumProduce,
  getMachineBinding,
  getSumBinding,
  getProduce,
} from "@/api/dataScreen/index.js";
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const router = useRouter();
const time = ref(null);

const orderTimer = ref(null);
const timer = ref(null);
const apiTimer = ref(null);
const bindTimer = ref(null);
const currentIndex = ref(0);
const machineType = ref(1);
const machineList = ref([]);
const produceOrderList = ref([]);
const mySwiper = ref(null);
const workshopId = ref("7");
const keyBind = ref(0);
const sumProduce = ref({});
const key = ref(0);
const orderKey = ref(0);
const workBranchList = ref([
  { title: "一车间", value: "7" },
  { title: "二车间", value: "8" },
  { title: "三车间", value: "9" },
  { title: "四车间", value: "10" },
]);
// 获取当前时间
const getCurrentDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  time.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
let swiperOption = ref({
  slidesPerView: 4, // 一屏显示的slide个数  'auto'
  spaceBetween: 10,
  // slidesPerGroup: 1, //每组多少个swiper滑块
  // centeredSlides: true, // 居中的slide是否标记为active，默认是最左active,这样样式即可生效
  // slideToClickedSlide: true, // 点击的slide会居中
  loop: true, // 循环播放, 可有无限滚动效果，初始加载即是滚动后的效果
  scrollbar: { draggable: true },
  grabCursor: true, //抓手光标
  autoplay: {
    delay: 2000,
    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay
    pauseOnMouseEnter: true, //鼠标置于swiper是否时暂停自动切换
  },
  direction: "vertical", //水平(horizontal)
  //使用前进后退按钮来控制Swiper切换。
  navigation: true, // 1默认，在内
  // 2前进、后退按钮放到容器的外面
  // navigation: {
  //   nextEl: ".swiper-button-next",
  //   prevEl: ".swiper-button-prev",
  //   hiddenClass: "button-hidden", //隐藏时的class
  //   disabledClass: "button-disabled", //不可用时的class
  // },
  // direction: "vertical",
  //使用分页器导航
  // pagination: {
  //   clickable: true,
  // },
});
getCurrentDateTime();

const hanldeClike = (row, index) => {
  workshopId.value = row.value;
  currentIndex.value = index;
  if (row.value == 7 || row.value == 10) {
    machineType.value = 1;
    getSumLingApi();
    getMachineLingApi();
  } else {
    machineType.value = 5;
    // 装订 本月装订数
    getMachineBindingApi();
    getSumBindingApi();
    bindTimer.value = setInterval(() => {
      getMachineBindingApi();
      getSumBindingApi();
    }, 20000);
  }
  getReportList();

  //已经排产生产单
  getProduceOrder();
};
function getList() {
  getDataList({
    pageNum: 1,
    pageSize: 10,
    workshopId: workshopId.value,
  })
    .then((response) => {
      machineList.value = response.rows;
      mySwiper.value.allowSlideNext();
    })
    .catch((err) => {});
}
const configLing = ref({
  number: [0],
  toFixed: 2,
  content: "{nt}",
  style: {
    fontSize: 46,
    fontWeight: 700,
    fill: "#29fcff",
    textAlign: "center",
  },
});
const configLingBind = ref({
  number: [0],
  toFixed: 0,
  content: "{nt}",
  style: {
    fontSize: 46,
    fontWeight: 700,
    fill: "#29fcff",
    textAlign: "center",
  },
});

const reportList = ref([]);
const printConfig = reactive({
  data: [],
  unit: "(令)",
});
const bindConfig = reactive({
  data: [],
  unit: "(册)",
});

const config = ref({
  header: [
    "机台名称",
    "报工单号",
    "报工日期",
    "生产单编号",
    "书刊名称",
    "品种",
    "贴标",
    "订单数量",
    "完成数量",
  ],
  data: [],
  index: true,
  columnWidth: [50, 180, 170, 100, 150, 500, 160, 60, 100, 100],
  // oddRowBGC: "rgba(142, 174, 216, 0.6)",
  oddRowBGC: "rgba(34, 55, 106, 0.6)",
  evenRowBGC: "rgba(16, 32, 71, 0.6)",
  // evenRowBGC: "rgba(90, 140, 222, 0.6)",
  headerBGC: "#0E2882",
  align: [
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
  ],
  carousel: "page",
});
const getReportList = () => {
  getReportDetail({
    pageNum: 1,
    pageSize: 50,
    workshopId: workshopId.value,
    type: machineType.value,
  })
    .then((res) => {
      reportList.value = res.rows.map((item) => {
        item.reportDate = item.reportDate?.split(" ")[0];
        return [
          item.machineName,
          item.code,
          item.reportDate,
          item.produceCode,
          item.orderName,
          item.breed,
          item.labeling,
          item.printAmount,
          item.finishNum,
        ];
      });
      config.value.data = reportList.value;
      orderKey.value++;
    })
    .catch((err) => {});
};
// 获取当前时间
const getCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};
getCurrentDateTime();
// 获取已经排产生产单
// const getProduceOrder = () => {
//   let submitDate = getCurrentDate();
//   getProduceOrderList({ pageNum: 1, pageSize: 50, type: 2, submitDate }).then(
//     (res) => {
//       produceOrderList.value = res.rows;
//     }
//   );
// };

const getMachineLingApi = () => {
  if (workshopId.value == 8 || workshopId.value == 9) {
    return;
  }
  getMachineLing({ workshopId: workshopId.value }).then((res) => {
    res.data.forEach((item) => {
      item.name = item.machineName;
      item.value = item.realityLing;
    });
    printConfig.data = res.data;
    key.value++;
  });
};
const getSumLingApi = () => {
  if (workshopId.value == 8 || workshopId.value == 9) {
    return;
  }
  getSumLing({ workshopId: workshopId.value }).then((res) => {
    configLing.value = {
      ...configLing.value,
      number: [res.data],
    };
  });
};
const getSumProduceApi = () => {
  getSumProduce().then((res) => {
    sumProduce.value = { ...res.data };
  });
};
// 装订册数
const getSumBindingApi = () => {
  if (workshopId.value == 7 || workshopId.value == 10) {
    return;
  }
  getSumBinding({ workshopId: workshopId.value }).then((res) => {
    configLingBind.value = {
      ...configLingBind.value,
      number: [res.data],
    };
  });
};
// 本月装订数据
const getMachineBindingApi = () => {
  if (workshopId.value == 7 || workshopId.value == 10) {
    return;
  }
  getMachineBinding({ workshopId: workshopId.value }).then((res) => {
    res.data.forEach((item) => {
      item.name = item.machineName;
      item.value = item.completeCount;
    });
    bindConfig.data = res.data;
    keyBind.value++;
  });
};

// 获取已经排产生产单
const getProduceOrder = () => {
  // let submitDate = getCurrentDate();
  // { workshopId: workshopId.value }
  getProduce().then((res) => {
    produceOrderList.value = res.data;
  });
};
const startTimeTask = () => {
  apiTimer.value = setInterval(() => {
    getMachineLingApi();
    getSumLingApi();
    getSumProduceApi();
    getReportList();
  }, 20000);
  orderTimer.value = setInterval(() => {
    getReportList();
    getProduceOrder();
  }, 60000);
};
onMounted(() => {
  timer.value = setInterval(() => {
    getCurrentDateTime();
  }, 1000);
  getReportList();
  // getList();
  getProduceOrder();
  getMachineLingApi();
  getSumLingApi();
  getSumProduceApi();
  startTimeTask();
});

// 销毁时触发
onBeforeUnmount(() => {
  clearInterval(timer.value);
  clearInterval(apiTimer.value);
  clearInterval(bindTimer.value);
  clearInterval(orderTimer.value);
});
</script>

<style lang="scss" scoped>
@import url("./index.scss");
.dataScreen-main {
  display: flex;
  // justify-content: space-around;
  margin-top: 36px;
  padding: 0 10px;
}
.title {
  display: flex;
  align-content: center;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, #283d95, transparent);
  box-shadow: 2px 2px 4px #6273b8;
  // background: rgba(90, 140, 222, 0.5);
}
.main-left {
  width: 30%;
  // background-color: red;
}
.main-right {
  width: 30%;
}
.main-center {
  flex: 1;
}
.tab-box {
  display: flex;
  justify-content: space-around;
  margin: 0 20px;
}
.tab-item {
  margin: 0 10px;
  border: 1px solid #61c9ea;
  padding: 5px 20px;
  border-radius: 6px;
  color: #fff;
  font-style: italic;
  font-weight: 700;
  background-color: #1d3867;
  cursor: pointer;
}
.current-item {
  background-color: #759dbe;
  box-shadow: 0 0 20px rgba(229, 229, 237, 0.5);
  // box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
  // color: #5f76f6;
}
.title-machineName {
  color: #73f7fc;
  // font-size: 24px;
}
.dataScreen-order {
  // height: 600px;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 10px;
}
.dataScreen-container {
  display: flex;
  flex-direction: column;
}
.ling {
  display: flex;
  justify-content: center;
  // font-style: italic;
  // font-size: 36px;
}
.print-box {
  display: flex;
  height: 80px;
}
.print-item {
  margin: 10px;
  text-align: center;
}
.print-info {
  flex: 1;
  height: 80px;
  color: #73f7fc;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.print-title {
  font-size: 20px;
}
.workshop-main {
  padding-left: 10px;
  display: flex;
  height: 160px;
  justify-content: space-between;
}
.workshop-item {
  margin: 10px;
}
.workshop-info {
  flex: 1;
  height: 100%;
  color: #73f7fc;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}
.workshop-title1,
.workshop-title2 {
  font-size: 48px;
  font-weight: 600;
}
.workshop-title1 {
  color: #73f7fc;
}
.workshop-title2 {
  color: #dda04e;
}

.right-order-item {
  padding: 0 10px;
  display: flex;
  color: #fff;
  justify-content: space-around;
  align-items: center;
}
.index_common,
.index_common-more {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-weight: 600;
  border-radius: 50%; //图案为圆形
  color: #ffffff;
  text-shadow: #283d95;
  // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.index_common-more {
  border: 2px solid #638fc5;
  line-height: 22px;
}
.index_one {
  background: #c68fd8;
}
.index_two {
  background: #e6a23c;
}
.index_three {
  background: #5b7fd1;
}
.index_more {
  background: #0e0f46;
}
.right-order-middle {
  flex: 1;
  margin: 10px;
  font-size: 14px;
}
</style>